<template>
  <div id="main">
    <div id="" class="card">
      <div style="width: 100%; height: 50px ">
        <!--查询条件-->
        <el-form :inline="true" :model="queryVo" class="demo-form-inline center" style="inline-height:50px; text-align: center; margin: auto">
          <el-form-item label="仓库名称:">
            <el-input v-model="queryVo.StockName" placeholder="请输入仓库名称"></el-input>
          </el-form-item>
          <el-form-item label="仓库类型:">
            <el-select clearable v-model="queryVo.StockType">
              <el-option label="测试数据1" value=1></el-option>
              <el-option label="测试数据2" value=2></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审核状态:">
            <el-select clearable v-model="queryVo.CheckTag">
              <el-option label="等待审核" value=0></el-option>
              <el-option label="审核通过" value=1></el-option>
              <el-option label="驳回申请" vaule=2></el-option>
            </el-select>
          </el-form-item>
          <el-form-tiem>
            <el-button type="primary" icon="el-icon-search"  @click="query" >搜索</el-button>
          </el-form-tiem>
        </el-form>
      </div>
      <!--数据表格-->
      <el-table
          :data="StockData"
          style="width: 100%">
        <el-table-column
            prop="id"
            label="编号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="stockName"
            label="仓库名称"
            width="180">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-view" @click="details_div=true">{{scope.row.stockName}}</el-button>
          </template>
        </el-table-column>
        <el-table-column
            prop="stockType"
            label="仓库类型"
            width="180">
        </el-table-column>
        <el-table-column
            prop="register"
            label="登记人"
            width="180">
        </el-table-column>
        <el-table-column
            prop="registerTime"
            label="登记时间"
            width="180">
        </el-table-column>
        <el-table-column
            prop="checkTag"
            label="审核状态"
            width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.checkTag=='S001-0'">等待审核</span>
            <span v-else-if="scope.row.checkTag=='S001-2'" style="color: #F56C6C">驳回申请</span>
            <span v-else-if="scope.row.checkTag=='S001-1'" style="color: #67C23A">审核通过</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="0"
            label="操作"
            width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.checkTag=='S001-0'">
              <el-button type="text" @click="audit(scope.row)">审核</el-button>
            </span>
            <span v-else-if="scope.row.checkTag!='S001-0'"></span>
          </template>
        </el-table-column>
      </el-table>
      <!--分页插件-->
      <div id="cell" class="page">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
    <div id="details_dialog">
      <el-dialog
          title="仓库信息"
          :visible.sync="dialogVisible"
          width="50%"
          :before-close="handleClose">
        <el-form :model="stock" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="仓库名" prop="stockName">
            <el-input v-model="stock.stockName" disabled></el-input>
          </el-form-item>
          <el-form-item label="最大储存量" prop="maxCapacityAmount">
            <el-input v-model="stock.maxCapacityAmount" disabled>
            </el-input>
          </el-form-item>
          <el-form-item label="报警上限" prop="maxAmount" >
            <el-input v-model="stock.maxAmount" disabled>
            </el-input>
          </el-form-item>
          <el-form-item label="报警下限" prop="minAmount">
            <el-input v-model="stock.minAmount" disabled>
            </el-input>
          </el-form-item>
          <el-form-item label="仓库类型" prop="stockType">
            <el-select v-model="stock.stockType" disabled>
              <el-option
                  v-for="type in gatherType"
                  :label="type.gatherType"
                  :value="type.id"
                  :key="type.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="储存商品类型" prop="productTypeList">
            <el-cascader
                v-model="value"
                :options="options"
                :props="{label:'productTypeName',value:'id',children:'children',expandTrigger: 'hover'}"
                @change="handleChange" disabled>
            </el-cascader>
          </el-form-item>
          <el-form-item label="描述">
            <el-input type="textarea" v-model="stock.remark" disabled>
            </el-input>
          </el-form-item>
          <el-form-item label="登记人"  prop="register">
            <el-input v-model="stock.register" disabled></el-input>
          </el-form-item>
          <el-form-item label="审核人" prop="checker">
            <el-input v-model="stock.checker" >
            </el-input>
          </el-form-item>
          <el-form-item label="审核时间" prop="checkTime">
            <el-input v-model="stock.checkTime" readonly>
            </el-input>
          </el-form-item>
          <el-form-item label="审核理由" prop="checkReason">
            <el-input v-model="stock.checkReason" >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="auditStock">通过</el-button>
            <el-button type="danger" @click="noAudit">驳回</el-button>
            <el-button @click="dialogVisible=false">取消</el-button>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
  </span>
      </el-dialog>
      <div  class="el-overlay" style="z-index: 2055;" v-show="details_div">
        <div aria-modal="true" aria-label="查看仓库" aria-describedby="el-id-6243-50" class="el-drawer rtl open" role="dialog" style="width: 450px;">
          <span class="el-drawer__sr-focus" tabindex="-1"></span>
          <header class="el-drawer__header">
            <span id="el-id-6243-51" role="heading" aria-level="2" class="el-drawer__title">查看仓库</span>
            <button aria-label="el.drawer.close" class="el-drawer__close-btn" type="button" @click="details_div=false">
              <i class="el-icon el-drawer__close">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                  <path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path>
                </svg>
              </i>
            </button>
          </header>
          <div id="el-id-6243-50" class="el-drawer__body">
            <el-form ref="form" :model="StockData" label-width="80px">
              <el-form-item label="仓库名称">
                <el-input v-model="StockData" disabled></el-input>
              </el-form-item>
              <el-form-item label="描述">
                <el-input type="textarea" v-model="StockData.remark" disabled>
                </el-input>
              </el-form-item>
              <el-form-item label="商品类型">
                <el-select v-model="StockData.productTypeList" disabled>
                  <el-option></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="登记人">
                <el-input v-model="StockData.register" disabled></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Audit",
  data() {
    return {
      details_div:false,
      //switch按钮值
      switch_value:'1',
      //弹窗参数
      dialogVisible: false,
      //每页行数
      pageSize: 5,
      //总页数
      total: 0,
      // 当前页
      currentPage: 1,
      // 仓库类型
      type: [],
      // 查询条件
      queryVo: {
        stockType: '',
        stockName: '',
        checkTag:''
      },
      //仓库数据
      StockData: [],
      stock:{},
      //仓库类型
      gatherType: [],
    }
  },
  created() {
    this.selGather()
    this.option()
    this.query()
  },
  methods: {
    //获取当前时间
    nowDate() {
      let getTime = new Date().getTime();
      let time = new Date(getTime);
      let year = time.getFullYear();//年
      let month = (time.getMonth() + 1).toString().padStart(2, '0');
      let date = time.getDate().toString().padStart(2, '0');
      let hour = time.getHours().toString().padStart(2, '0');
      let minute = time.getMinutes().toString().padStart(2, '0');
      let second = time.getSeconds().toString().padStart(2, '0');
      return (
          year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second
      )
    },
    handleChange(value) {
      console.log(value);
    },
    //弹窗关闭判断方法
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.query()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.query()
    },
    async query() {
      const {data: res} = await this.$http.post
      (`/stock/unAudit/${this.currentPage}/${this.pageSize}`, this.queryVo)
      this.StockData = res.list
      this.total = res.total
      console.log(res)
    },
    //查询所有仓库类型
    async selGather(){
      const {data : res}=await this.$http.post
      (`/gatherType/list`)
      this.gatherType=res
      console.log(res)
    },
    //主页下拉搜索框
    async option(){
      const {data: res} =  await this.$http.post('/productType/getProType')
      // for(let i =0;i<res.size;i++){
      this.options=res
      // }
      console.log(res)
    },
    audit(data){
      this.dialogVisible=true
      this.stock=data
      this.stock.checkTime=this.nowDate()
      console.log(this.stock)
    },
    async noAudit(){
      let o=confirm("您确定驳回吗？")
      if(o){
        this.stock.checkTag="S001-2"
        const {data :res}=await this.$http.post
        (`stock/updStock`,this.stock)
        if(res){
          this.$message({
            message: '操作成功！已驳回请求',
            type: 'success'
          })
          this.query()
        }}
      this.dialogVisible=false
    },
    async auditStock(){
      let o=confirm("您确定通过吗？")
      if(o){
        this.stock.checkTag="S001-1"
        const {data :res}=await this.$http.post
        (`stock/updStock`,this.stock)
        if(res){
          this.$message({
            message: '操作成功！已通过审核',
            type: 'success'
          })
          this.query()
        }}
      this.dialogVisible=false
    }
  }
}
</script>

<style >
.card {
  box-sizing: border-box;
  padding: 20px;
  overflow-x: hidden;
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  box-shadow: 0 0 12px #0000000d
}
.page{
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.el-icon svg {
  height: 1em;
  width: 1em;
}
.el-drawer .el-drawer__header span {
  font-size: 17px;
  line-height: 17px;
  color: black !important;
}
.el-drawer .el-drawer__header {
  padding: 16px 20px;
  margin-bottom: 0;
  border-bottom: 1px solid #ebeef5;
}
</style>